<template>
	<publicPage isNavbar>
		<view slot="navbar">
			<u-navbar :placeholder="true" bgColor="#2DBCBE">
				<view slot="left"></view>
				<view slot="center" class="disFlxAC colorF navbarCenter">
					<view class="disFlxAC" @click="scanCode">
						<u-image
							src="@/static/image/image220701(12).png"
							width="36rpx"
							height="36rpx"
						></u-image>
						<text class="pl-3">扫码签约</text></view
					>
					<view class="border1"></view>
          <view class="disFlxAC" @click="loginGo('/pagesC/joinConsult/index')">
						<u-image
							src="@/static/image/image220701(26).png"
							width="36rpx"
							height="36rpx"
						></u-image>
						<text class="pl-3">加入会议</text></view
					>
				</view>
				<view slot="right"></view>
			</u-navbar>
		</view>

		<view class="tabsFlex1 bgf">
			<u-tabs
				:list="[{ name: '签约医生' }, { name: '签约团队' }]"
				style="width: 100%"
				@change="handChange"
			></u-tabs>
		</view>
		<!-- 列表 -->
		<scroll-view
			v-if="list && list.length"
			scroll-y
			style="height: calc(100% - 44px)"
			@scrolltolower="scrolltolower"
			refresher-enabled
			:refresher-triggered="refresherTriggered"
			@refresherrefresh="refresherrefresh"
		>
			<view
				v-for="(item, index) in list"
				:key="index"
				class="forBox"
				@click="loginGo(currentTabs === 1 ? `/pagesC/team/index?teamId=${item.teamId}` : `/pagesC/expHome/index?expertId=${item.id}`)"
			>
				<template v-if="currentTabs === 1">
					<InfoCard
						:item="{
							headimg: item.teamImg,
							userName: item.teamName
						}"
					>
						<template #rightContent>
              <view class="pt-10">{{ item.companyName }}</view>
							<view class="pt-2 color9 ov-2">{{ item.teamProfile }}</view>
						</template>
					</InfoCard>
				</template>
				<template v-else>
					<InfoCard :item="item" />
					<BtnList :item="item" />
				</template>
			</view>
			<view class="pt-15"></view>
		</scroll-view>

		<!-- 缺省页 -->
		<view class="defaultPage disFlxCC" v-if="!list.length && listLoad">
			<view>
				<u-image
					src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/image220701%287%29.png"
					width="166rpx"
					height="166rpx"
				></u-image>
			</view>
			<view class="pt-8 pb-47 color9">{{ currentTabs === 1 ? '暂无签约团队' : '暂无签约专家' }}</view>
			<view style="width: 400rpx">
				<u-button
					v-if="!isLogin"
					type="primary"
					text="一键登录"
					:customStyle="{
						fontSize: '32rpx',
						borderRadius: '20rpx',
						height: '88rpx',
					}"
					open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber"
				></u-button>
			</view>
		</view>
		<HoverBall />
	</publicPage>
</template>

<script>
import orderApi from "@/api/order.js";
import HoverBall from "@/components/hoverBall.vue";
import InfoCard from "@/components/infoCard.vue";
import BtnList from "@/components/btnList.vue";
export default {
	components: {
		HoverBall,
		InfoCard,
		BtnList,
	},
	data() {
		return {
			currentTabs: 0,
			list: [],
			listLoad: false, // 加载是否完成
			getParams: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
				// status: ""
			},
			refresherTriggered: false,
		};
	},
	onShow() {
		if (!this.list.length) {
			this.getList();
		} else if (this.$store.state.isReset) {
			this.getParams.pageNum = 1;
			this.getList();
			this.$store.commit("SET_ISRESET", false);
		}
	},
	onShareAppMessage() {},
	onShareTimeline() {},
	methods: {
		// 获取专家列表
		async getList() {
			try {
				const { data, total } =
					this.currentTabs === 1
						? await orderApi.getTeamList(this.getParams)
						: await orderApi.getExpList(this.getParams);
				this.list = this.getParams.pageNum === 1 ? data : [...this.list, ...data];
				this.getParams.total = total;
				this.listLoad = true;
			} catch (error) {
				this.listLoad = true;
			}
		},
		handChange(e) {
			const { index } = e;
			this.currentTabs = index;
			this.refresherTriggered = false;
			Object.assign(this.$data.getParams, this.$options.data().getParams);

      this.list = []; // 解决切换列表闪烁
      this.listLoad = false; // 解决切换列表闪烁
			this.getList();
		},
		scrolltolower() {
			if (this.list.length !== this.getParams.total) {
				// u-view内部节流函数
				uni.$u.throttle(() => {
					this.getParams.pageNum++;
					this.getList();
					console.log(this.getParams.pageNum, "滚动加载");
				}, 2000);
			} else {
				console.log("没有更多了");
			}
		},
		async refresherrefresh() {
			this.refresherTriggered = true;
			this.$data.getParams.pageNum = this.$options.data().getParams.pageNum;
			this.$data.getParams.total = this.$options.data().getParams.total;
			await this.getList();
			console.log(this.getParams.pageNum, "下拉刷新");
			setTimeout(() => {
				this.refresherTriggered = false;
			}, 1000);
		},

		// 点击扫一扫
		scanCode() {
			uni.scanCode({
				success: (res) => {
					console.log(res, "扫码参数");

					if (res.path) {
						this.goPage(`/${res.path}`);
					} else if (res.scanType === "QR_CODE" && res.result.indexOf("mp_inspection") !== -1) {
						this.goPage(`/pagesC/reserveExp/inspection?q=${encodeURIComponent(res.result)}`);
					} else {
						uni.showToast({
							title: "暂不支持的二维码",
							icon: "none",
						});
					}
				},
			});
		},
		// 立即登录
		getPhoneNumber(e) {
			this.$store.dispatch("getPhoneNumber", e).then(() => {
				this.getList();
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.navbarCenter {
	flex: 1;
	padding-left: 28rpx;
	position: relative;
	.border1 {
		width: 1px;
		height: 32rpx;
		background-color: #dddddd;
		margin: 0 26rpx;
	}
	.filterBox {
		position: absolute;
		left: 50rpx;
		top: 50rpx;
		color: #333333;
	}
}
.tabsFlex1 {
	box-shadow: 0 0 10rpx #e5e5e5;
	position: sticky;
	top: 0;
	z-index: 2;
}
.defaultPage {
	height: calc(100% - 44px);
}

.forBox {
	margin-top: 30rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	border-radius: 20rpx;
	overflow: hidden;
	background-color: #ffffff;
}
</style>
